<template>
	<uni-popup :show="show" position="bottom" mode="fixed" @hidePopup="hidePopup">
		<view class="semp-city">	
			<view class="title">
				{{msg}}
			</view>
			<view class="has-choose-box flex-row pad-left">
				<text class="has-choose" :class="index==showRank?'active':''" v-for="(item,index) in cityList" :key="index" @click="onRankClick(index)" v-show="index<=showRank">{{item.name!='0'?item.name:'请选择'}}</text>			
			</view>
			<view>
			<scroll-view id="city-item-box" scroll-y="true">
				<view class="city-item pad-left flex-row" :class="item.code==valueObj[cityList[showRank].identify].code?'active':''" v-for="(item,index) in cityList[showRank].showList" :key="index" @click="onChooseClick(item)">
					<view>{{item.name}}</view>
					<view v-if="item.code==valueObj[cityList[showRank].identify].code">
						<uni-icon type="checkmarkempty" color="#0faeff" size="26"></uni-icon>
					</view>
				</view>
			</scroll-view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	import uniPopup from '@/components/uni-popup.vue'
	import uniIcon  from '@/components/uni-icons/uni-icons.vue'
	import { getProvince, getCity, getArea, getStreet } from '@/libs/api.js'
	export default {
		name: 'sempCity',
		components:{
			uniPopup,
			uniIcon
		},
		data() {
			return {
				show: true,
				other:{
					label:"",
					value:'0'
				},
				showRank:0,								
				cityList:[
					{
						identify:'province',
						name:'0',
						showList:[]
					},
					{
						identify:'city',
						name:'0',
						showList:[]
					},
					{
						identify:'county',
						name:'0',						
						showList:[]
					},
					{
						identify:'town',
						name:'0',
						showList:[]
					}
				],
				valueObj:{
					province:{
						name:'',												
						code:'0'
					},
					city:{
						name:'',												
						code:'0'
					},
					county:{
						name:'',												
						code:'0'
					},
					town:{
						name:'',												
						code:'0'
					},						
				}		
			};
		},
		props: {
			msg: {
				type: String,
				default: '选择地址信息'
			},
		},
		methods:{
			getProvince() {
				getProvince().then(res => {
					this.cityList[0].showList = res.data
					this.$forceUpdate()
				})
			},
			getCity(code) {
				getCity({code}).then(res=>{
					this.cityList[1].showList = res.data
					this.$forceUpdate()
				})
			},
			getArea(code) {
				getArea({code}).then(res=>{
					this.cityList[2].showList = res.data
					this.$forceUpdate()
				})
			},
			getStreet(code) {
				getStreet({code}).then(res=>{
					this.cityList[3].showList = res.data
					this.$forceUpdate()
				})
			},
			handleData(item) {
				this.valueObj[this.cityList[this.showRank].identify].name=item.name;
				this.valueObj[this.cityList[this.showRank].identify].code=item.code;
				this.cityList[this.showRank].name=item.name;					
				if(this.showRank < 3) {
					this.showRank++;
					this.cityList[this.showRank].showList = []
				}
			},
			onChooseClick(item){	
				if(this.showRank === 0) {
					this.handleData(item)
					this.getCity(item.code)
				} else if (this.showRank === 1) {
					this.handleData(item)
					this.getArea(item.code)
				} else if (this.showRank === 2) {
					this.handleData(item)
					this.getStreet(item.code)
				} else if (this.showRank === 3) {
					this.handleData(item)
					this.$emit('confirm',this.valueObj);
				}
			},
			onRankClick(key){
				this.showRank=key;
			},	
			showPopup() {
				let _this = this
				if(_this.show) return
				_this.show = true
				// if(_this.cityList[0].showList.length === 0) {
				// 	this.getProvince()
				// }
			},
			hidePopup() {
				this.show = false
			}
		},
		computed: {
			
		}
		
	
	}

</script>

<style lang="scss">
	view{
		font-size: $uni-font-size-base;
	}
	.semp-city{
		.title {
			text-align: start;
			font-size: $uni-font-size-lg;
			padding: 0 10rpx;
			height: 80rpx;
		}
	}
   .has-choose-box{
	   height:80rpx;
	   box-shadow:  0 3rpx 3rpx #ccc;
	}
	.has-choose{
		padding: 0 10rpx;
		margin-right:50rpx;
		border-bottom:2px solid #eee;
		font-size: $uni-font-size-sm
	}
	.has-choose.active{
		color:$uni-color-primary;
		border-color:$uni-color-primary;
	}
	#city-item-box{
		padding: 0 10rpx;
		height:500rpx;
	}
	.city-item{
		height:80rpx;		
		border-bottom:1rpx solid #fff;
	}
	.city-item view{
		justify-content: center;
	}
	.city-item.active{
		color:$uni-color-primary;
	}
</style>
